<template>
  <div class="addComment">
    <p class="title">发表评价</p>
    <div class="editComment fff">
      <!-- 描述相符 -->
      <div class="answerOfDesc flex">
        <img src="@/assets/logo.jpg" alt="">
        <span>描述相符</span>
        <div class="answer_stras flex" ref="star1">
          <span @click="selectStar1(1)" class="iconfont" :class="{'icon-empty-star': selectstarIndex1 <= 0,'icon-wujiaoxing': selectstarIndex1 >= 1}"></span>
          <span @click="selectStar1(2)" class="iconfont" :class="{'icon-empty-star': selectstarIndex1 <= 1,'icon-wujiaoxing': selectstarIndex1 >= 2}"></span>
          <span @click="selectStar1(3)" class="iconfont" :class="{'icon-empty-star': selectstarIndex1 <= 2,'icon-wujiaoxing': selectstarIndex1 >= 3}"></span>
          <span @click="selectStar1(4)" class="iconfont" :class="{'icon-empty-star': selectstarIndex1 <= 3,'icon-wujiaoxing': selectstarIndex1 >= 4}"></span>
          <span @click="selectStar1(5)" class="iconfont" :class="{'icon-empty-star': selectstarIndex1 <= 4,'icon-wujiaoxing': selectstarIndex1 >= 5}"></span>
        </div>
        <span>{{ desc }}</span>
      </div>
      <!-- 评价文字 -->
      <textarea name="" id="" cols="30" rows="10" placeholder="商品满足您的期待吗？说说它的优点和美中不足的地方吧！" v-model="content">

      </textarea>
      <!-- 物流服务 -->
      <div class="logistics flex">
        <span>物流服务</span>
        <div class="logistics_stars flex">
          <span @click="selectStar2(1)" class="iconfont" :class="{'icon-empty-star': selectstarIndex2 <= 0,'icon-wujiaoxing': selectstarIndex2 >= 1}"></span>
          <span @click="selectStar2(2)" class="iconfont" :class="{'icon-empty-star': selectstarIndex2 <= 1,'icon-wujiaoxing': selectstarIndex2 >= 2}"></span>
          <span @click="selectStar2(3)" class="iconfont" :class="{'icon-empty-star': selectstarIndex2 <= 2,'icon-wujiaoxing': selectstarIndex2 >= 3}"></span>
          <span @click="selectStar2(4)" class="iconfont" :class="{'icon-empty-star': selectstarIndex2 <= 3,'icon-wujiaoxing': selectstarIndex2 >= 4}"></span>
          <span @click="selectStar2(5)" class="iconfont" :class="{'icon-empty-star': selectstarIndex2 <= 4,'icon-wujiaoxing': selectstarIndex2 >= 5}"></span>
        </div>
        <span>{{ wuliu }}</span>
      </div>
      <!-- 服务态度 -->
      <div class="service_attitude flex">
        <span>服务态度</span>
        <div class="attitude_stars flex">
          <span @click="selectStar3(1)" class="iconfont" :class="{'icon-empty-star': selectstarIndex3 <= 0,'icon-wujiaoxing': selectstarIndex3 >= 1}"></span>
          <span @click="selectStar3(2)" class="iconfont" :class="{'icon-empty-star': selectstarIndex3 <= 1,'icon-wujiaoxing': selectstarIndex3 >= 2}"></span>
          <span @click="selectStar3(3)" class="iconfont" :class="{'icon-empty-star': selectstarIndex3 <= 2,'icon-wujiaoxing': selectstarIndex3 >= 3}"></span>
          <span @click="selectStar3(4)" class="iconfont" :class="{'icon-empty-star': selectstarIndex3 <= 3,'icon-wujiaoxing': selectstarIndex3 >= 4}"></span>
          <span @click="selectStar3(5)" class="iconfont" :class="{'icon-empty-star': selectstarIndex3 <= 4,'icon-wujiaoxing': selectstarIndex3 >= 5}"></span>
        </div>
        <span>
          {{ service }}
        </span>
      </div>
    </div>
    <input type="button" value="提交评价" @click="add">
    <shade v-show="loadShow"/> 
  </div>
</template>

<script>
import { addComments, getTeaSamplesInfo } from "@/api/chayang";
export default {
  data() {
    return {
      content: "",
      selectstarIndex1: 5,
      selectstarIndex2: 5,
      selectstarIndex3: 5,
      desc: "非常好",
      wuliu: "非常好",
      service: "非常好",
      loadShow: true
    };
  },
  created() {
    getTeaSamplesInfo(this.$route.query.good_id).then(result => {
      this.$store.commit("SETPAGEINFO", {
        title: result.data.name,
        description: ""
      });
      this.loadShow = false;
    });
  },
  methods: {
    selectStar1(index) {
      this.selectstarIndex1 = index;
    },
    selectStar2(index) {
      this.selectstarIndex2 = index;
    },
    selectStar3(index) {
      this.selectstarIndex3 = index;
    },
    add() {
      if (this.content === "") {
        this.$toast({
          message: "请写下您对商品的评价哦"
          // iconClass: "iconfont icon-xx"
        });
        return false;
      }
      addComments({
        good_id: this.$route.query.good_id,
        content: this.content,
        dp_score: this.selectstarIndex1,
        dp_score_express: this.selectstarIndex2,
        dp_score_service: this.selectstarIndex3
      }).then(result => {
        if(result.data.success =='yes') {
          this.$toast({
            message: result.data.message,
            iconClass: "iconfont icon-dagou_wuquan"
          });
          this.$router.push('/order')
        } else {
          this.$toast(result.data.message);
        }
      });
    }
  },
  watch: {
    selectstarIndex1(value, oldValue) {
      switch (value) {
        case 1:
          this.desc = "差";
          break;
        case 2:
          this.desc = "一般";
          break;
        case 3:
          this.desc = "好";
          break;
        case 4:
          this.desc = "很好";
          break;
        default:
          this.desc = "非常好";
      }
    },
    selectstarIndex2(value, oldValue) {
      switch (value) {
        case 1:
          this.wuliu = "差";
          break;
        case 2:
          this.wuliu = "一般";
          break;
        case 3:
          this.wuliu = "好";
          break;
        case 4:
          this.wuliu = "很好";
          break;
        default:
          this.wuliu = "非常好";
      }
    },
    selectstarIndex3(value, oldValue) {
      switch (value) {
        case 1:
          this.service = "差";
          break;
        case 2:
          this.service = "一般";
          break;
        case 3:
          this.service = "好";
          break;
        case 4:
          this.service = "很好";
          break;
        default:
          this.service = "非常好";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.addComment {
  padding: 0 to(17);
  .title {
    font-size: to(32);
    line-height: to(100);
  }
  .editComment {
    border: 1px solid #c5c5c5;
    .answerOfDesc {
      padding: to(15);
      img {
        width: to(84);
        height: to(84);
        margin-right: to(15);
        vertical-align: middle;
      }
      span {
        line-height: to(84);
        font-size: to(24);
        color: #5b5b5b;
      }
      .answer_stras {
        padding: 0 to(15);
        width: to(300);
        span {
          flex: 1;
          font-size: to(40);
          color: #aa0000;
        }
      }
    }
    textarea {
      display: block;
      width: 100%;
      border-top: 1px solid #c5c5c5;
      border-bottom: 1px solid #c5c5c5;
      border-left: 0;
      border-right: 0;
      padding: to(18);
      font-size: to(24);
      line-height: to(40);
      &::-webkit-input-placeholder {
        color: #c5c5c5;
      }
    }
    .logistics,
    .service_attitude {
      height: to(119);
      span {
        color: #5b5b5b;
        line-height: to(119);
        padding: 0 to(20);
        font-size: to(30);
        &.iconfont {
          color: #aa0000;
          font-size: to(40);
          padding: 0 to(7);
        }
      }
      div {
        width: to(300);
        span {
          flex: 1;
        }
      }
    }
    .logistics {
      border-bottom: 1px solid #c5c5c5;
    }
  }
  input {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #aa0000;
    height: to(91);
    font-size: to(30);
    border: 0;
    color: white;
  }
}
</style>
